<template>
	<view>
		<view class="flex-white-plr26 ptb10 mt32 bdb_f5">
			<text class="mr26">商机名称
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="name" placeholder="请在此输入" />
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="selectKehuFun">
			<text class="mr26">关联客户
				<text class="redXingh">*</text>
			</text>
			<view :class="customer_name ? '' : 'cBlack'">
				{{customer_name ? customer_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="selectLxrFun">
			<text class="mr26">联系人
			</text>
			<view :class="linkman_name ? '' : 'cBlack'">
				{{linkman_name ? linkman_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">发现日期<text class="redXingh">*</text></text>
			<picker mode="date" :value="find_date" start="1999-02-15" end="2100-02-15" @change="bindDateChange" @click="dateIndex=1">
			    <view v-if="find_date" class="w420">{{find_date}}</view>
			    <view v-else style="color: #c5c5c5;">请选择商机发现日期</view>
			</picker>
			<u-icon class="ml26" name="calendar" size="40" color="#888888"></u-icon>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">预计签单日期<text class="redXingh">*</text></text>
			<picker mode="date" :value="bill_date" start="1999-02-15" end="2100-02-15" @change="bindDateChange"  @click="dateIndex=2">
			    <view v-if="bill_date" class="w420">{{bill_date}}</view>
			    <view v-else style="color: #c5c5c5;">请选择预成交日期</view>
			</picker>
			<u-icon class="ml26" name="calendar" size="40" color="#888888"></u-icon>
		</view>
		<view class="flex-white-plr26 ptb20 mt32 bdb_f5 mr16">
			<text class="mr26">预计签单金额
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="estimate_money" input-align="right" placeholder="请在此输入或添加产品自动计算"/>
		</view>
		<view @click="pickerSelectFun('商机阶段')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">商机阶段
				<text class="redXingh">*</text>
			</text>
			<view  :class="salestage ? '' : 'cBlack'">
				{{salestage ? salestage : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view @click="pickerSelectFun('商机来源')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">商机来源
				<text class="redXingh">*</text>
			</text>
			<view :class="source ? '' : 'cBlack'">
				{{source ? source : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb10 mt32 bdb_f5">
			<text class="mr26">预计成功比例
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="success_rate" placeholder="请在此输入预计成功比例,如:20" />
		</view>
		<view class="flex-white-plr26-column ptb20 mt32">
			<view style="margin-bottom: 8rpx;">
				<text>备注</text>
			</view>
			<u-input v-model="needs" type="textarea" :border="true" :height="100" :auto-height="true" />
		</view>
		<!--提交按钮-->
		<view class="submitView">
			<u-button type="primary" class="submitBtn" :ripple="true" ripple-bg-color="#909399" @click="submitBtnFun">{{pageType ? '保存' : '提交'}}</u-button>
		</view>
		<!--组件-->
		<u-select v-model="selectShow" :list="selectList" @confirm="selectConfirmFun"></u-select>
	</view>
</template>

<script>
	let that = '';
	import { getNowDate, getDayFun } from '@/utils/date.js'
	import { apiChance } from '@/api/crm.js'
	export default {
		data() {
			return {
				selectShow: false,
				selectList: [],
				selectType: '',
				type: '',
				name: '',
				customer_name: '',
				customer_id: '',
				linkman_name: '',
				linkman_id: '',
				dateIndex:0,
				find_date: '',
				bill_date: '',
				estimate_money: '',
				success_rate:'10',
				salestage: '初步沟通',
				source: '独立开发',
				needs: '',
				num: 1,
				totalPrice: '',
				cpList: [],
				cpHzObj: {
					totalNum: 0,
					price: 0,
					discount: 0,
					sumPrice: 0
				},
				isTjcp: false,
				owner_user_id:uni.$userInfo.id,
				sys_user_id: uni.$userInfo.id,
				pageType: '',
				xgInfoObj: {}
			}
		},
		watch: {
			cpList: function(val, old) {
				that.cpCalcFun();
			}
		},
		onLoad(e) {
			that = this;
			if(e.type == 'update') {
				that.setDataFun();
				that.pageType = 'update';
				uni.setNavigationBarTitle({
					title: '修改商机信息'
				})
			}
			if(e.customer_name) {
				that.customer_name = e.customer_name;
			}
			if(e.customer_id) {
				that.customer_id = e.customer_id;
			}
			uni.$on('sjKehuBindFun', that.sjKehuBindFun)
			uni.$on('sjLxrBindFun', that.sjLxrBindFun)
		},
		onBackPress() {
			uni.$off('sjKehuBindFun', that.sjKehuBindFun)
			uni.$off('sjLxrBindFun', that.sjLxrBindFun)
		},
		methods: {
			// 展示相应数据选择框
			pickerSelectFun: function(str) {
				if(str == '商机阶段') {
					that.selectList = uni.$cstDict.salestage
				} else if(str == '商机来源') {
					that.selectList = uni.$cstDict.source
				}
				that.selectShow = true;
				that.selectType = str;
			},
			// 选择框选中事件
			selectConfirmFun: function(e) {
				if(that.selectType == '商机来源') {
					that.source = e[0].label;
				} else if(that.selectType == '商机阶段') {
					that.salestage = e[0].label;
				}
			},
			// 日期修改
			bindDateChange: function(e) {
				if(that.dateIndex==1){
					that.find_date = e.detail.value;
				}else if(that.dateIndex==2){
					that.bill_date = e.detail.value;
				}
			},
			valChange: function(e) {
				
			},
			// 选择所属客户
			selectKehuFun: function() {
				uni.navigateTo({
					url: '../cst_customer/show?type=add_chance_goback'
				})
			},
			// 绑定客户
			sjKehuBindFun: function(e) {
				if(that.customer_id != '' && that.customer_id != e.customer_id) {
					that.linkman_id = '';
					that.linkman_name = '';
				}
				that.customer_id = e.customer_id;
				that.customer_name = e.customer_name;
			},
			// 选择客户联系人
			selectLxrFun: function() {
				if(!that.customer_id) {
					uni.$myModalFun('请先关联客户！')
					return
				}
				uni.navigateTo({
					url: '../cst_linkman/show?type=add_chance_goback&customer_id=' + that.customer_id
				})
			},
			// 绑定联系人
			sjLxrBindFun: function(e) {
				console.log(e)
				that.linkman_id = e.linkman_id;
				that.linkman_name = e.linkman_name;
			},
			// 提交方法
			submitBtnFun: function() {
				if(!that.name) {
					uni.$myModalFun('商机名称不能为空，请输入！')
					return
				}
				if(!that.customer_name) {
					uni.$myModalFun('商机所属客户不能为空，请选择！')
					return
				}
				if(!that.bill_date) {
					uni.$myModalFun('预计成交日期不能为空，请选择！')
					return
				}
				if(!that.estimate_money) {
					uni.$myModalFun('商机金额不能为空，请输入或者添加产品自动计算！')
					return
				}
				if(!that.salestage) {
					uni.$myModalFun('商机阶段不能为空，请选择！')
					return
				}
				if(!that.source) {
					uni.$myModalFun('商机来源不能为空，请选择！')
					return
				}
				let reqObj = {
					cpList: that.cpList,
					req: {
						name: that.name,
						customer_name: that.customer_name,
						customer_id: that.customer_id,
						linkman_name: that.linkman_name,
						linkman_id: that.linkman_id,
						find_date: that.find_date,
						bill_date: that.bill_date,
						estimate_money: that.estimate_money,
						success_rate: that.success_rate,
						salestage: that.salestage,
						source: that.source,
						needs: that.needs,
						owner_user_id: that.owner_user_id,
					}
				}
				
				let action = 'add';
				if (that.pageType == 'update') {
					action = 'update' 
					reqObj.req.id = that.xgInfoObj.id;
					uni.showLoading({
						title: '修改中...'
					})
				} else {
					reqObj.req.create_user_id = uni.$userInfo.id;
					uni.showLoading({
						title: '提交中...'
					})
				}
				
				let reqData = {
					action: action,
					params: reqObj
				}
				apiChance(reqData)
				.then(res => {
					console.log(res)
					if (action == 'update') {
						uni.showToast({
							title: '商机修改成功',
							icon: 'none',
							duration: 1000,
							mask: true
						});
						
						uni.$sjInfo = reqObj.req;
						
						setTimeout(()=> {
							uni.navigateBack()
						}, 1000)
						
						
						
					} else {
						uni.showToast({
							title: '商机新增成功',
							icon: 'none',
							duration: 1000,
							mask: true
						})
						uni.$emit('addSjItemInListFun')
						setTimeout(()=> {
							uni.redirectTo({
								url: './detail?index=0&fromDetail=true&id=' + res.data
							})
						}, 1000)
					}
				})
			},
			// 数据恢复
			setDataFun: function() {
				let obj = uni.$sjInfo
				that.xgInfoObj = uni.$sjInfo
				that.name = obj.name
				that.customer_name = obj.customer_name
				that.customer_id = obj.customer_id
				that.linkman_name = obj.linkman_name
				that.linkman_id = obj.linkman_id
				that.find_date = obj.find_date
				that.bill_date = obj.bill_date
				that.estimate_money = obj.estimate_money
				that.salestage = obj.salestage
				that.success_rate = obj.success_rate
				that.source = obj.source
				that.needs = obj.needs
				that.owner_user_id = obj.owner_user_id
				that.create_user_id = obj.create_user_id
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
		padding-bottom: 260rpx;
	}
	.u-radio {
		width: 200rpx !important;
	}
	.submitView {
		width: 100%;
		padding: 16rpx 0 26rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1rpx solid #f1f1f1;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
	}
	.submitBtn {
		width: 666rpx;
	}
	.productBox {
		background-color: #FFFFFF;
		margin-top: 32rpx;
		padding: 26rpx 0;
	}
	.tjcpName {
		width: 686rpx;
		height: 40rpx;
		font-size: 16px;
		font-weight: bold;
		border-left: 6rpx solid #007AFF;
		padding-left: 12rpx;
		margin-left: 26rpx;
		margin-top: 26rpx;
	}
	.cpInput {
		width: 150rpx !important;
		margin-right: 12rpx;
	}
	.cpInput>input {
		box-sizing: border-box;
		border: 1rpx solid #DDDDDD;
		width: 100%;
		height: 60rpx;
		border-radius: 10rpx;
		padding: 0 10rpx;
	}
	.cpInput1 {
		width: 200rpx !important;
		margin-right: 12rpx;
	}
	.cpInput1>input {
		box-sizing: border-box;
		border: 1rpx solid #DDDDDD;
		width: 100%;
		height: 60rpx;
		border-radius: 10rpx;
		padding: 0 10rpx;
	}
	.clearIcon {
		position: absolute;
		right: 6rpx;
		top: 6rpx;
	}
	.greenPrice {
		font-size: 16px;
		color: #19BE6B !important;
		font-weight: bold;
	}
	.disFlex {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}
	.inputName {
		color: #ADADAD;
		font-size: 16px;
	}
	.addHKQS {
		display: flex;
		align-items: center;
		padding: 16rpx 26rpx;
		font-size: 15px;
		font-weight: bold;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
